import React from 'react';
import './index.less';
import {connect} from "dva";
import Curd from "components/Curd";
import createColumns from "./columns";
import searchColumns from "./searchColumns";
import BaseComponent from "components/Base/BaseComponent";
import {Layout, Modal} from "antd";
import GoodItem from "./GoodItem";
import Commission from "./GoodReward";
import GoodEditor from "./GoodEditor";

const {Content, Footer, Header} = Layout;


@connect(({goods, goodType}) => ({goods, goodType}))
export default class extends BaseComponent {

  state = {
    visible: false,
    showGoodItem: false,
    goodsId: undefined,
    showEditor: false,
    content: undefined,
  }

  getNamespace() {
    return 'goods';
  }

  componentDidMount() {

    this.dispatchNamespace(`goodType/getAll`);
  }

  getTableColumns() {
    return createColumns(this);
  }

  getSearchColumns() {
    return searchColumns;
  }

  showGoodEditor = (id, content) => {
    this.setState({showEditor: true, goodsId: id, content: content});
  }

  showGoodItem = (id) => {
    this.setState({visible: true, showGoodItem: true,  goodsId: id});
  }

  showGoodReward = (id) => {
    this.setState({visible: true, showGoodItem: false,  goodsId: id});
  }

  // 下架
  soldOut = (id, state) => {
    this.dispatch({
      type: `${this.getNamespace()}/save`,
      payload: {
        value: {id, soldOut: state},
        notice: this.showMsg,
        success: () => {
          this.getPageInfo(this.state);
          this.setState({
            record: null,
            visible: false
          });
        }
      }
    });
  }

  handleCancel = () => {
    this.setState({visible: false});
  }

  render() {

    const {visible, showGoodItem, goodsId, showEditor, content} = this.state;
    const curdProps = {
      ...this.props,
      namespace: 'goods',
      tableColumns: createColumns,
      searchColumns: searchColumns(this),
      picKeys: ["pic", "carouselPics"],
      showGoodItem: this.showGoodItem,
      showGoodEditor: this.showGoodEditor,
      showGoodReward: this.showGoodReward,
      soldOut: this.soldOut,
      picGroup: "good",
      showNum: false,
    };

    const goodEditorProps = {
      goodsId: goodsId,
      content: content,
      rtun: () => {
        this.setState({showEditor: false})
      },
      onContent: (html) => {
        const {goodsId} = this.state;
        console.log("onContent", html);
        this.dispatch({
          type: `${this.getNamespace()}/save`,
          payload: {
            value: {id: goodsId, description: encodeURI(html)},
            notice: this.showMsg,
            success: () => {
              this.showMsg("success", "保存商品详情成功");
              this.getPageInfo(this.state);
            }
          }
        });
      }
    };

    return (
      <Layout>
        {
          showEditor ?
            <Content>
              <GoodEditor {...goodEditorProps}/>
            </Content>
            :
            <Content>
              <Curd {...curdProps}/>
              <Modal
                width={800}
                title={showGoodItem?"商品规格列表":"商品佣金"}
                visible={visible}
                onCancel={this.handleCancel}
                footer={null}
              >
                {
                  showGoodItem? <GoodItem goodsId={goodsId}/>: <Commission goodsId={goodsId}/>
                }
              </Modal>
            </Content>
        }
      </Layout>
    );

  }
}
